<template>
  <div class="div_box">
    <div id="imageTofile" ref="imageTofile" class="image_tofile" style="width: 1800px;">
      <el-row :gutter="20">
        <el-col :span="14">
          <div class="summaryContentDiv">
            <el-row style="margin-top: 0;">
              <el-col :span="4">
                <div :class="summaryDiv">
                  <div class="summaryTitle">并发用户数</div>
                  <div class="summaryContent">{{ reportDetail.currentVusers }}</div>
                </div>
              </el-col>
              <el-col :span="4">
                <div :class="summaryDiv">
                  <div class="summaryTitle">QPS</div>
                  <div class="summaryContent">{{ reportDetail.currentQps }}</div>
                </div>
              </el-col>
              <el-col :span="4">
                <div :class="summaryDiv">
                  <div class="summaryTitle">平均响应时间</div>
                  <div class="summaryContent">{{ parseFloat(reportDetail.currentAvgDelay).toFixed(2) }}</div>
                </div>
              </el-col>
              <el-col :span="4">
                <div :class="summaryDiv">
                  <div class="summaryTitle">99%响应时间</div>
                  <div class="summaryContent">{{ parseFloat(reportDetail.currentP99Delay).toFixed(2) }}</div>
                </div>
              </el-col>
              <el-col :span="4">
                <div :class="summaryDiv">
                  <div class="summaryTitle">发送字节/秒</div>
                  <div class="summaryContent">{{ reportDetail.currentSend }}</div>
                </div>
              </el-col>
              <el-col :span="4">
                <div :class="summaryDiv">
                  <div class="summaryTitle">接收字节/秒</div>
                  <div class="summaryContent">{{ reportDetail.currentReceive }}</div>
                </div>
              </el-col>
            </el-row>
            <el-row :gutter="5">
              <el-col :span="2"><el-tag type="info">项目名称</el-tag></el-col>
              <el-col :span="6"><el-tag class="titleValue" type="success">{{ reportDetail.taskName }}</el-tag></el-col>
              <el-col :span="2"><el-tag type="info">脚本名称</el-tag></el-col>
              <el-col :span="6"><el-tag class="titleValue" type="success">{{ reportDetail.scriptName }}</el-tag></el-col>
              <el-col :span="2"><el-tag type="info">报告状态</el-tag></el-col>
              <el-col :span="6"><el-tag class="titleValue" type="success">{{ reportDetail.status }}</el-tag></el-col>
            </el-row>
            <el-row :gutter="5">
              <el-col :span="2"><el-tag type="info">开始时间</el-tag></el-col>
              <el-col :span="6"><el-tag class="titleValue" type="success">{{ reportDetail.startTime }}</el-tag></el-col>
              <el-col :span="2"><el-tag type="info">结束时间</el-tag></el-col>
              <el-col :span="6"><el-tag class="titleValue" type="success">{{ reportDetail.endTime }}</el-tag></el-col>
              <el-col :span="2"><el-tag type="info">备注信息</el-tag></el-col>
              <el-col :span="6"><el-tag class="titleValue" type="success"><el-input v-model="reportDetail.remark" class="el-tag-input" /></el-tag></el-col>
            </el-row>
            <el-row>
              <el-col :span="16">
                <div class="grid-content bg-purple">
                  <el-button v-if="!showAll" type="primary" title="所有采样点" @click="showAll = !showAll, count = 999999999, initReportDetail()">显示全部</el-button>
                  <el-button v-if="showAll" type="primary" title="最后600个采样点" @click="showAll = !showAll, count = 600, initReportDetail()">显示部分</el-button>
                  <el-button v-if="!connectLine" type="primary" title="开启联动时画面会有些卡顿" @click="connectLine = !connectLine, openLineConnect()">开启联动</el-button>
                  <el-button v-if="connectLine" type="primary" title="关闭联动可以提高页面流畅度" @click="connectLine = !connectLine, closeLineConnect()">关闭联动</el-button>
                  <el-button type="primary" :loading="toImgloading" @click="toImg()">保存报告</el-button>
                </div>
              </el-col>
              <el-col :span="4"><el-input-number v-model="interval" title="自动刷新间隔" style="width: 120px;" :min="3" :max="300" @change="handleChange" /></el-col>
              <el-col :span="4"><el-input-number v-model="chartInterval" title="视图采样间隔" style="width: 120px;" :min="1" :max="3600" @change="initReportDetail" /></el-col>
            </el-row>
          </div>
        </el-col>
        <el-col :span="10">
          <div class="summaryContentDiv">
            <el-row>
              <el-col :span="12"><div id="success_fail_pie" ref="success_fail_pie" class="chart-box-small" /></el-col>
              <el-col :span="12">
                <div id="fail_detail_pie" ref="fail_detail_pie" class="chart-box-small">
                  <el-button v-if="errorMessageVisable" style="width: 100%; height: 100%;" @click="errorMessageDialogVisible = true">点击查看错误详情</el-button>
                </div>
              </el-col>
            </el-row>
          </div>
        </el-col>
      </el-row>
      <div style="margin-left: 20px; margin-right: 20px;"><el-progress style="padding-left: 40; padding-right: 40;" :text-inside="true" :stroke-width="18" :percentage="reportDetail.percentAge" status="success" /></div>
      <el-row :gutter="5">
        <el-col :span="24"><div id="qps_vuser_line" ref="qps_vuser_line" class="chart-box" /></el-col>
        <el-col :span="22">
          <div v-if="activeIndex === '1'" id="avg_delay_line" ref="avg_delay_line" class="chart-box" />
          <div v-if="activeIndex === '2'" id="delay_50_line" ref="delay_50_line" class="chart-box" />
          <div v-if="activeIndex === '3'" id="delay_90_line" ref="delay_90_line" class="chart-box" />
          <div v-if="activeIndex === '4'" id="delay_99_line" ref="delay_99_line" class="chart-box" />
          <div v-if="activeIndex === '5'" id="min_delay_line" ref="min_delay_line" class="chart-box" />
          <div v-if="activeIndex === '6'" id="max_delay_line" ref="max_delay_line" class="chart-box" />
        </el-col>
        <el-col :span="2">
          <el-menu style="margin-top: 10px;" :default-active="activeIndex" mode="vertical" @select="handleSelect">
            <el-menu-item index="1">平均时延</el-menu-item>
            <el-menu-item index="2">50%时延</el-menu-item>
            <el-menu-item index="3">90%时延</el-menu-item>
            <el-menu-item index="4">99%时延</el-menu-item>
            <el-menu-item index="5">最小时延</el-menu-item>
            <el-menu-item index="6">最大时延</el-menu-item>
          </el-menu>
        </el-col>
        <el-col :span="24"><div id="net_line" ref="net_line" class="chart-box" /></el-col>
      </el-row>
      <!-- 显示错误内容 -->
      <el-dialog title="错误详情" :visible.sync="errorMessageDialogVisible" :fullscreen="true">
        <editor v-model="errorMessage" lang="json" theme="chrome" width="100%" height="800px" @init="editorInit" />
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { getDetail } from '@/api/perf/report.js'
import echarts from 'echarts'
import html2canvas from 'html2canvas'
export default {
  name: 'PerfReportDetail',
  components: {
    editor: require('vue2-ace-editor')
  },
  data() {
    return {
      id: null,
      timer: null,
      count: 600,
      showAll: false,
      connectLine: false,
      reportDetail: {},
      errorMessage: '{}',
      errorMessageVisable: false,
      errorMessageDialogVisible: false,
      interval: 5,
      chartInterval: 3,
      toImgloading: false,
      activeIndex: '1',
      summaryDiv: 'summaryDiv',
      currentPath: this.$route.fullPath,
      optionTemplate: {
        grid: { top: 60, left: 60, right: 30 },
        legend: { type: 'scroll', top: 30 },
        dataZoom: [{ type: 'slider', maxValueSpan: 600 }],
        tooltip: { trigger: 'axis', axisPointer: { type: 'cross' }, backgroundColor: 'rgba(245, 245, 245, 0.8)', borderWidth: 1, borderColor: '#ccc', padding: 10, textStyle: { color: '#000' }, extraCssText: 'width: auto; box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);' },
        axisPointer: { link: { xAxisIndex: 'all' }, label: { backgroundColor: '#777' }},
        toolbox: { feature: { dataZoom: { yAxisIndex: 'none' }, restore: {}, saveAsImage: {}}}
      }
    }
  },
  watch: {
    reportDetail(newValue, oldValue) {
      const that = this
      this.$store.state.tagsView.visitedViews.forEach(function(tag) {
        if (tag.fullPath === that.currentPath) {
          tag.title = '性能报告：' + that.reportDetail.taskName + '-' + that.reportDetail.scriptName.replace('.jmx', '') + '(' + that.reportDetail.percentAge + '%)'
        }
      })
    }
  },
  created() {
    this.id = this.$route.params.reportId
    this.initReportDetail()
    this.reflushReport()
  },
  destroyed() {
    this.stopReflush()
  },
  methods: {
    toImg() {
      this.toImgloading = true
      this.summaryDiv = 'NONE'
      const that = this
      setTimeout(function() {
        const imageTofileDom = document.getElementById('imageTofile')
        let width = imageTofileDom.offsetWidth
        const height = imageTofileDom.offsetHeight
        let x = imageTofileDom.getBoundingClientRect().left
        width = width + x * 2
        x = 0
        const y = imageTofileDom.getBoundingClientRect().top
        const scale = 1
        that.$message('从（' + x + '，' + y + '）开始截图，截图尺寸（' + width + '，' + height + '）')
        html2canvas(that.$refs.imageTofile, {
          backgroundColor: '#ffffff',
          dpi: window.devicePixelRatio * 2,
          scale: scale * 1,
          width: width,
          height: height,
          x: x,
          y: y
        }).then((canvas) => {
          const dataurl = canvas.toDataURL('image/png')
          const donwLink = document.createElement('a')
          donwLink.href = dataurl
          donwLink.download = '统计分析' + new Date().getTime() + '.png' // 图片名字
          donwLink.click()
          // 或者
          // const event = new MouseEvent('click')
          // donwLink.dispatchEvent(event)
          that.summaryDiv = 'summaryDiv'
          that.toImgloading = false
        })
      }, 1000)
    },
    openLineConnect() {
      echarts.connect('perf_line_group')
    },
    closeLineConnect() {
      echarts.disconnect('perf_line_group')
    },
    reflushReport() {
      // 这里用that，要不在setInterval中访问不到this
      const that = this
      this.timer = setInterval(function() {
        if (that.reportDetail.status !== 'RUNNING' && that.reportDetail.status !== 'WAITTING') { // WAITTING状态的也要刷新
          that.stopReflush()
        }
        that.initReportDetail()
      }, 1000 * this.interval)
    },
    stopReflush() {
      clearInterval(this.timer)
    },
    initReportDetail() {
      getDetail(this.id, this.count, this.chartInterval).then(respnose => {
        if (respnose && respnose.code === 200) {
          const { data } = respnose
          this.reportDetail = data
          // 开始绘图
          this.initSuccessFailPie()
          this.initFailDetail()
          this.initQPS_VuserLine()
          this.initAvgDelayLine()
          this.init50DelayLine()
          this.init90DelayLine()
          this.init99DelayLine()
          this.initMinDelayLine()
          this.initMaxDelayLine()
          this.initNetLine()
        } else { this.$message.error(respnose.message) }
      })
    },
    handleSelect(key, keyPath) {
      this.activeIndex = key
      this.$nextTick(() => {
        switch (this.activeIndex) {
          case '1':
            this.initAvgDelayLine()
            break
          case '2':
            this.init50DelayLine()
            break
          case '3':
            this.init90DelayLine()
            break
          case '4':
            this.init99DelayLine()
            break
          case '5':
            this.initMinDelayLine()
            break
          case '6':
            this.initMaxDelayLine()
            break
        }
      })
    },
    editorInit(ed) {
      require('brace/ext/language_tools') // language extension prerequsite...
      require('brace/mode/xml')
      require('brace/mode/javascript') // language
      require('brace/mode/less')
      require('brace/theme/chrome')
      require('brace/snippets/javascript') // snippet
      ed.setReadOnly(true)
    },
    // 成功&错误分布图
    initSuccessFailPie() {
      // dom不存在时不画
      if (!this.$refs.success_fail_pie) {
        return
      }
      const option = {
        // title: { text: '成功 & 错误统计', left: 'left', top: 0, textStyle: { color: '#000000' }},
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        series: [
          {
            name: '总计数',
            type: 'pie',
            radius: ['40%', '55%'],
            label: {
              normal: {
                formatter: '{b|{b}：}{per|{d}%}  ',
                rich: {
                  b: {
                    fontSize: 16,
                    lineHeight: 33
                  },
                  per: {
                    color: '#eee',
                    backgroundColor: '#eb6709b5',
                    padding: [2, 4],
                    borderRadius: 2
                  }
                }
              }
            },
            data: [
              { value: this.reportDetail.successCount, name: '成功', itemStyle: { color: '#67c23a' }},
              { value: this.reportDetail.failCount, name: '失败', itemStyle: { color: '#f00' }}
            ]
          }
        ]
      }
      // 不要重复初始化
      let chartPie = echarts.getInstanceByDom(this.$refs.success_fail_pie)
      if (!chartPie) {
        chartPie = echarts.init(this.$refs.success_fail_pie, 'light')
        this.$once('hook:beforeDestroy', function() {
          echarts.dispose(chartPie)
        })
      }
      chartPie.setOption(option)
      // window.addEventListener('resize', () => {
      //   chartPie.resize()
      // })
    },
    // 错误分布比例图
    initFailDetail() {
      // dom不存在时不画
      if (!this.$refs.fail_detail_pie) {
        return
      }
      if (this.reportDetail.errorMessage.length > 20) {
        this.errorMessageVisable = true
        this.errorMessage = JSON.stringify(this.reportDetail.errorMessage, null, 4)
        return
      }
      const option = {
        // title: { text: '错误类别统计', left: 'left', top: 0, textStyle: { color: '#000000' }},
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : <br/>计数: {c}  占比: {d}%',
          position: function(p) {
            return [p[0] + 10, p[1] - 10]
          },
          extraCssText: 'width: auto; height: auto; white-space: normal; position: fixed; box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);'
        },
        series: [
          {
            name: '失败信息',
            type: 'pie',
            radius: ['40%', '55%'],
            label: {
              normal: {
                formatter: '{per|{d}%}  ',
                rich: {
                  per: {
                    color: '#eee',
                    backgroundColor: '#eb6709b5',
                    padding: [2, 4],
                    borderRadius: 2
                  }
                }
              }
            },
            data: this.reportDetail.errorMessage
          }
        ]
      }
      // 不要重复初始化
      let chartPie = echarts.getInstanceByDom(this.$refs.fail_detail_pie)
      if (!chartPie) {
        chartPie = echarts.init(this.$refs.fail_detail_pie, 'light')
        this.$once('hook:beforeDestroy', function() {
          echarts.dispose(chartPie)
        })
      }
      chartPie.setOption(option)
      // window.addEventListener('resize', () => {
      //   chartPie.resize()
      // })
    },
    // QPS & Vuser折线图
    initQPS_VuserLine() {
      // dom不存在时不画
      if (!this.$refs.qps_vuser_line) {
        return
      }
      const series = []
      series.length = this.reportDetail.qps_threads.length - 1
      series.fill({ type: 'line', smooth: true })
      let option = {
        title: {
          left: 'center',
          text: 'QPS With VUsers'
        },
        dataset: {
          dimensions: this.reportDetail.qps_threads,
          source: this.reportDetail.data
        },
        xAxis: { type: 'category' },
        yAxis: {},
        series: series
      }
      option = Object.assign(option, this.optionTemplate)
      // 不要重复初始化
      let chartLine = echarts.getInstanceByDom(this.$refs.qps_vuser_line)
      if (!chartLine) {
        chartLine = echarts.init(this.$refs.qps_vuser_line, 'light')
        this.$once('hook:beforeDestroy', function() {
          echarts.dispose(chartLine)
        })
      }
      chartLine.setOption(option)
      chartLine.group = 'perf_line_group' // 折线图联动
      // window.addEventListener('resize', () => {
      //   chartLine.resize()
      // })
    },
    // 时延折线图
    initAvgDelayLine() {
      // dom不存在时不画
      if (!this.$refs.avg_delay_line) {
        return
      }
      const series = []
      series.length = this.reportDetail.delayAvg.length - 1
      series.fill({ type: 'line', smooth: true })
      let option = {
        title: {
          left: 'center',
          text: 'AvgDelay'
        },
        legend: {},
        tooltip: {},
        dataset: {
          dimensions: this.reportDetail.delayAvg,
          source: this.reportDetail.data
        },
        xAxis: { type: 'category' },
        yAxis: {},
        series: series
      }
      option = Object.assign(option, this.optionTemplate)
      // 不要重复初始化
      let chartLine = echarts.getInstanceByDom(this.$refs.avg_delay_line)
      if (!chartLine) {
        chartLine = echarts.init(this.$refs.avg_delay_line, 'light')
        this.$once('hook:beforeDestroy', function() {
          echarts.dispose(chartLine)
        })
      }
      chartLine.setOption(option)
      chartLine.group = 'perf_line_group' // 折线图联动
      // window.addEventListener('resize', () => {
      //   chartLine.resize()
      // })
    },
    init50DelayLine() {
      // dom不存在时不画
      if (!this.$refs.delay_50_line) {
        return
      }
      const series = []
      series.length = this.reportDetail.delay50.length - 1
      series.fill({ type: 'line', smooth: true })
      let option = {
        title: {
          left: 'center',
          text: '50% Delay'
        },
        legend: {},
        tooltip: {},
        dataset: {
          dimensions: this.reportDetail.delay50,
          source: this.reportDetail.data
        },
        xAxis: { type: 'category' },
        yAxis: {},
        series: series
      }
      option = Object.assign(option, this.optionTemplate)
      // 不要重复初始化
      let chartLine = echarts.getInstanceByDom(this.$refs.delay_50_line)
      if (!chartLine) {
        chartLine = echarts.init(this.$refs.delay_50_line, 'light')
        this.$once('hook:beforeDestroy', function() {
          echarts.dispose(chartLine)
        })
      }
      chartLine.setOption(option)
      chartLine.group = 'perf_line_group' // 折线图联动
      // window.addEventListener('resize', () => {
      //   chartLine.resize()
      // })
    },
    init90DelayLine() {
      // dom不存在时不画
      if (!this.$refs.delay_90_line) {
        return
      }
      const series = []
      series.length = this.reportDetail.delay90.length - 1
      series.fill({ type: 'line', smooth: true })
      let option = {
        title: {
          left: 'center',
          text: '90% Delay'
        },
        legend: {},
        tooltip: {},
        dataset: {
          dimensions: this.reportDetail.delay90,
          source: this.reportDetail.data
        },
        xAxis: { type: 'category' },
        yAxis: {},
        series: series
      }
      option = Object.assign(option, this.optionTemplate)
      // 不要重复初始化
      let chartLine = echarts.getInstanceByDom(this.$refs.delay_90_line)
      if (!chartLine) {
        chartLine = echarts.init(this.$refs.delay_90_line, 'light')
        this.$once('hook:beforeDestroy', function() {
          echarts.dispose(chartLine)
        })
      }
      chartLine.setOption(option)
      chartLine.group = 'perf_line_group' // 折线图联动
      // window.addEventListener('resize', () => {
      //   chartLine.resize()
      // })
    },
    init99DelayLine() {
      // dom不存在时不画
      if (!this.$refs.delay_99_line) {
        return
      }
      const series = []
      series.length = this.reportDetail.delay99.length - 1
      series.fill({ type: 'line', smooth: true })
      let option = {
        title: {
          left: 'center',
          text: '99% Delay'
        },
        legend: {},
        tooltip: {},
        dataset: {
          dimensions: this.reportDetail.delay99,
          source: this.reportDetail.data
        },
        xAxis: { type: 'category' },
        yAxis: {},
        series: series
      }
      option = Object.assign(option, this.optionTemplate)
      // 不要重复初始化
      let chartLine = echarts.getInstanceByDom(this.$refs.delay_99_line)
      if (!chartLine) {
        chartLine = echarts.init(this.$refs.delay_99_line, 'light')
        this.$once('hook:beforeDestroy', function() {
          echarts.dispose(chartLine)
        })
      }
      chartLine.setOption(option)
      chartLine.group = 'perf_line_group' // 折线图联动
      // window.addEventListener('resize', () => {
      //   chartLine.resize()
      // })
    },
    initMinDelayLine() {
      // dom不存在时不画
      if (!this.$refs.min_delay_line) {
        return
      }
      const series = []
      series.length = this.reportDetail.delayMin.length - 1
      series.fill({ type: 'line', smooth: true })
      let option = {
        title: {
          left: 'center',
          text: 'MinDelay'
        },
        legend: {},
        tooltip: {},
        dataset: {
          dimensions: this.reportDetail.delayMin,
          source: this.reportDetail.data
        },
        xAxis: { type: 'category' },
        yAxis: {},
        series: series
      }
      option = Object.assign(option, this.optionTemplate)
      // 不要重复初始化
      let chartLine = echarts.getInstanceByDom(this.$refs.min_delay_line)
      if (!chartLine) {
        chartLine = echarts.init(this.$refs.min_delay_line, 'light')
        this.$once('hook:beforeDestroy', function() {
          echarts.dispose(chartLine)
        })
      }
      chartLine.setOption(option)
      chartLine.group = 'perf_line_group' // 折线图联动
      // window.addEventListener('resize', () => {
      //   chartLine.resize()
      // })
    },
    initMaxDelayLine() {
      // dom不存在时不画
      if (!this.$refs.max_delay_line) {
        return
      }
      const series = []
      series.length = this.reportDetail.delayMax.length - 1
      series.fill({ type: 'line', smooth: true })
      let option = {
        title: {
          left: 'center',
          text: 'MaxDelay'
        },
        legend: {},
        tooltip: {},
        dataset: {
          dimensions: this.reportDetail.delayMax,
          source: this.reportDetail.data
        },
        xAxis: { type: 'category' },
        yAxis: {},
        series: series
      }
      option = Object.assign(option, this.optionTemplate)
      // 不要重复初始化
      let chartLine = echarts.getInstanceByDom(this.$refs.max_delay_line)
      if (!chartLine) {
        chartLine = echarts.init(this.$refs.max_delay_line, 'light')
        this.$once('hook:beforeDestroy', function() {
          echarts.dispose(chartLine)
        })
      }
      chartLine.setOption(option)
      chartLine.group = 'perf_line_group' // 折线图联动
      // window.addEventListener('resize', () => {
      //   chartLine.resize()
      // })
    },
    // 网络吞吐量曲线
    initNetLine() {
      // dom不存在时不画
      if (!this.$refs.net_line) {
        return
      }
      const series = []
      series.length = this.reportDetail.send_receive.length - 1
      series.fill({ type: 'line', smooth: true })
      let option = {
        legend: {},
        tooltip: {},
        dataset: {
          dimensions: this.reportDetail.send_receive,
          source: this.reportDetail.data
        },
        xAxis: { type: 'category' },
        yAxis: {},
        series: series
      }
      option = Object.assign(option, this.optionTemplate)
      // 不要重复初始化
      let chartLine = echarts.getInstanceByDom(this.$refs.net_line)
      if (!chartLine) {
        chartLine = echarts.init(this.$refs.net_line, 'light')
        this.$once('hook:beforeDestroy', function() {
          echarts.dispose(chartLine)
        })
      }
      chartLine.setOption(option)
      chartLine.group = 'perf_line_group' // 折线图联动
      // window.addEventListener('resize', () => {
      //   chartLine.resize()
      // })
    },
    handleChange(value) {
      this.stopReflush()
      this.reflushReport()
    }
  }
}
</script>

<style scoped="scoped">
  .el-col {
    margin-top: 10px;
    margin-bottom: 10px;
  }
  .chart-box {
    min-height: 400px;
    border:1px solid #eeeeee;
    margin: 10px 10px 10px 10px;
    padding: 10px 20px;
  }
  .chart-box-small {
    min-height: 220px;
  }
  .summaryContentDiv {
    height: 260px;
    border:1px solid #eeeeee;
    margin: 10px 10px 10px 10px;
    padding: 10px 20px;
  }
  .summaryDiv {
    height: 60px;
    margin-right: 10px;
    padding: 5px 5px;
    box-shadow: 1px 1px 1px #f8c8a4, 1px 1px 3px #f8c8a4;
    border-radius: 5px;
  }
  .summaryTitle {
    font-size: small;
    color: #eb6709;
  }
  .summaryContent {
    margin-top: 10px;
    font-size: 25px;
    color: #13ce66;
    overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
  }
  .titleValue {
    width: 90%;
    overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
  }
  .div_box {
    border: 1px solid #eee;
    padding-left: 15px;
    padding-right: 15px;
    padding-top: 15px;
    padding-bottom: 10px;
    margin-top: 10px;
    margin-bottom: 10px;
    width: 100%;
    height: 100%;
    overflow-y: auto;
    overflow-x: auto;
  }
</style>
<style>
  /* 控制el-tag下面的input样式 */
  .el-tag-input input {
    border: none;
    background: #e7faf0;
    font-size: 12px;
    color: #3dce96;
    padding: 0;
    margin-top: -10px;
  }
</style>
